<template>
  <el-drawer
    :size="drawerWidth()"
    :title="node.name"
    direction="rtl"
    :show-close="true"
    :visible="visible"
    :wrapperClosable="true"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <div slot="title">
      <img :src="ccIcon" class="anticon" />
      <span class="flow-ant-drawer-title">
        <EditName v-model="node.name" />
      </span>
    </div>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">表单权限</p>
          <AuthForm v-model="node.privileges" readable />
        </div>
      </div>
    </div>
    <FlowDrawerFooter @close="onClose" @save="onSave" />
  </el-drawer>
</template>
<script>
  import { flowMixin } from '../../mixins/flowMixin';
  import FlowDrawerFooter from '../../common/DrawerFooter.vue';
  import EditName from '../../common/EditName.vue';
  import AuthForm from '../../common/AuthForm.vue';
  export default {
    name: 'FlowWriteSetting',
    components: { FlowDrawerFooter, EditName, AuthForm },
    mixins: [flowMixin],
    data() {
      return {
        node: {},
        visible: false,
      };
    },
    methods: {
      afterVisibleChange(val) {
        console.log('visible', val);
      },
      showDrawer(node) {
        this.visible = true;
        this.node = node;
      },
      onClose() {
        this.visible = false;
        this.$emit('close');
      },
      /**
       * 保存配置
       */
      onSave() {
        // 更新节点显示信息
        if (this.node.props.privileges.length > 0) {
          this.$store.dispatch('process/updateNode', { currNode: this.node, field: 'content', value: '已设置' });
          this.$store.dispatch('process/updateNode', { currNode: this.node, field: 'error', value: false });
          this.onClose();
        } else {
          this.$store.dispatch('process/updateNode', { currNode: this.node, field: 'content', value: null });
          this.$store.dispatch('process/updateNode', { currNode: this.node, field: 'error', value: false });
        }
      },
    },
  };
</script>
